<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="shortcut icon" href="../../assets/ico/favicon.ico">

    <title>Boomerang - Multipurpose Template Documentation</title>

    <!-- Bootstrap core CSS -->
    <link href="assets/bootstrap/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="assets/css/style.css" rel="stylesheet">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top" role="navigation">
      <div class="container-fluid">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Boomerang</a>
        </div>
        <div class="navbar-collapse collapse">
          <ul class="nav navbar-nav navbar-right">
            <li><a href="changelog.html">Changelog</a></li>
            <li><a href="https://wrapbootstrap.com/theme/boomerang-multipurpose-template-WB021609D" target="_blank">Purchase Boomerang</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container-fluid">
        <div class="row">
            <div class="col-sm-3 col-md-2 sidebar">
            <ul class="nav nav-sidebar">
            <li class="active"><a href="#welcome">Welcome</a></li>
            <li><a href="#features">Features</a></li>
            <li><a href="#setup">Quick setup</a></li>
            <li><a href="#styling">Styling and coloring</a></li>
            </ul>
            <ul class="nav nav-sidebar">
            <li><a href="#layout">Layout options</a></li>
            <li><a href="#header">Header</a></li>
            <li><a href="#slide-bar">Slide bar</a></li>
            <li><a href="#search">Search</a></li>
            <li><a href="#sliders">Sliders</a></li>
            </ul>
            <ul class="nav nav-sidebar">
            <li><a href="#sections">Section and boxes</a></li>
            <li><a href="#forms">Forms</a></li>
            <li><a href="#hovers">Hover animtions</a></li>
            </ul>
            </div>
        
        	<div class="col-sm-9 col-sm-offset-3 col-md-10 col-md-offset-2 main">
        		<div class="row" id="welcome">
                	<div class="col-md-6">
                    	<h2 class="sub-header">Welcome!</h2>
                    	<p>
                        Thank you for purchasing Boomerang. We are working hard on making this template the best solution for your ideas and projects. Updates will be released frequently and once you bought it you will receive a link to download all updates for free. 
                        </p>
                        <p>
                        Boomerang Bootstrap Template is a complete website template for business, freelancers and creatives. This template contains a variety of features that can be adapted for any situation. We have included, also, a shop template for those who want to start selling products in a nice and efficient way.
                        </p>
                    </div>
                    <div class="col-md-6">
                    	<h2 class="sub-header">Latest versions</h2>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                	<th>#</th>
                                    <th>Version</th>
                                    <th>Date of release</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr class="success">
                                	<td>3</td>
                                    <td>1.2</td>
                                    <td>20-02-2014</td>
                                    <td>Current version</td>
                                </tr>
                                <tr>
                                	<td>2</td>
                                    <td>1.1</td>
                                    <td>21-01-2014</td>
                                    <td><a href="#">Changelog</a></td>
                                </tr>
                                <tr>
                                	<td>1</td>
                                    <td>1.0</td>
                                    <td>06-01-2014</td>
                                    <td>Initial release</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
        		
                <!-- CHAPTER 1: FEATURES -->
                <div class="row" id="features">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Features</h2>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th>Feature</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr class="">
                                	<td><strong>Mobile ready</strong></td>
                                    <td>Our template is ready to work on any device resolution. </td>

                                </tr>
                                <tr class="">
                                	<td><strong>40+ Prebuild pages</strong></td>
                                    <td>With over 40 prebuild pages, now you have everything you need to start you website fresh and with no difficulties.</td>

                                </tr>
                                <tr class="">
                                	<td><strong>Over 300 icons</strong></td>
                                    <td>Font Awesome is the best option when it comes for scalables and vectorial icons.</td>

                                </tr>
                                <tr class="">
                                	<td><strong>Beautiful media gallery</strong></td>
                                    <td>Open photos, videos and other externat content in a nice and modern lightbox.</td>

                                </tr>
                            	<tr class="">
                                	<td><strong>Fully Customizable Headers</strong></td>
                                    <td>Each page can have its own custom header with different height and background image or slider.</td>

                                </tr>
                                <tr>
                                	<td><strong>Interactive Elements</strong></td>
                                    <td>Counters, pie charts, horizontal progress bars, icon progress bars, elements with animation</td>
                                </tr>
                                <tr>
                                	<td><strong>Portfolio</strong></td>
                                    <td>Choose between 6 different portfolio single layouts and 4 different portfolio list layouts combined with different number of columns</td>
                                </tr>
                                <tr>
                                	<td><strong>Blog Masonry Layout</strong></td>
                                    <td>Make your blog page display in masonry layout</td>
                                </tr>
                                <tr>
                                	<td><strong>LayerSlider ($15 value)</strong></td>
                                    <td>Create a responsive (mobile friendly) or fullwidth slider with must-see-effects</td>
                                </tr>
                                <tr>
                                	<td><strong>Retina Ready</strong></td>
                                    <td>This theme includes high resolution icons</td>
                                </tr>
                                <tr>
                                	<td><strong>Multiple Sidebars</strong></td>
                                    <td>Choose between 6 different portfolio single layouts and 4 different portfolio list layouts combined with different number of columns</td>
                                </tr>
                                <tr>
                                	<td><strong>Slide Bar Menu</strong></td>
                                    <td>Boomerang comes with an amazing side menu widget area.</td>
                                </tr>
                                <tr>
                                	<td><strong>Modern, Professional Design</strong></td>
                                    <td>This theme is designed by a team of professional designers focused on user-experience and unique design style.</td>
                                </tr>
                                <tr>
                                	<td><strong>Fully Responsive</strong></td>
                                    <td>Boomerang is a fully responsive template and works perfectly on all screen sizes and mobile devices.</td>
                                </tr>
                                <tr>
                                	<td><strong>Extremely Customizable</strong></td>
                                    <td>Unlimited colors and sizes for all elements, 500+ Google fonts and a robust backend offers a solution for a variety of business or personal uses.</td>
                                </tr>
                                <tr>
                                	<td><strong>Flexible Layout</strong></td>
                                    <td>Use our demo layout or create your own visually different experience using our modular shortcodes</td>
                                </tr>
                                <tr>
                                	<td><strong>Modular Shortcodes</strong></td>
                                    <td>Get creative with unlimited combinations of easy-to-use shortcodes and quickly create any type of page you like.</td>
                                </tr>
                                <tr>
                                	<td><strong>Perfect Code</strong></td>
                                    <td>Coded in HTML5, CCS3 and jQuery, this skillfully constructed theme is 100% valid.</td>
                                </tr>
                                <tr>
                                	<td><strong>Modular Contact Page</strong></td>
                                    <td>You can set any combination between Google maps, Contact Form and regular content.</td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <p>
                        NOTE: If you want to find out more about the included components, please click <a href="preview.webpixels.ro/boomerang/components.html" target="_blank">here</a>
                        </p>
                    </div>
                </div>
        		
                <!-- CHAPTER 2: PLUGINS -->
                <div class="row" id="plugins">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Plugins</h2>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th style="width:20%;">Plugin name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr class="">
                                	<td><strong>Animate</strong></td>
                                    <td>A cross-browser library of CSS animations. As easy to use as an easy thing. 
<a href="http://daneden.github.io/animate.css" target="_blank">http://daneden.github.io/animate.css</a></td>

                                </tr>
                                <tr class="">
                                	<td><strong>Easy Pie Chart</strong></td>
                                    <td>Easy pie chart is a jQuery plugin that uses the canvas element to render simple pie charts for single values. These charts are highly customizable, very easy to implement, scale to the resolution of the display of the client to provide sharp charts even on retina displays, and use requestAnimationFrame for smooth animations on modern devices. <a href="http://rendro.github.io/easy-pie-chart/" target="_blank">http://rendro.github.io/easy-pie-chart/</a></td>

                                </tr>
                                <tr class="">
                                	<td><strong>Fancybox</strong></td>
                                    <td>Modern lightbox for media showing. <a href="http://www.fancybox.net" target="_blank">http://www.fancybox.net</a></td>

                                </tr>
                                <tr class="">
                                	<td><strong>Hover dropdown</strong></td>
                                    <td>Boostrap extension that makes navabar dropdown toggable on hover. It can be easily deactivated if not needed.</td>

                                </tr>
                            	<tr class="">
                                	<td><strong>Layer Slider</strong></td>
                                    <td>LayerSlider WP is a premium multi-purpose slider for creating image galleries, content sliders, and mind-blowing slideshows with must-see effects. <a href="http://codecanyon.net/item/layerslider-responsive-wordpress-slider-plugin-/1362246" target="_blank">Buy it here</a></td>

                                </tr>
                                <tr>
                                	<td><strong>Masonry</strong></td>
                                    <td> It works by placing elements in optimal position based on available vertical space, sort of like a mason fitting stones in a wall. <a href="http://masonry.desandro.com/" target="_blank">http://masonry.desandro.com/</a></td>
                                </tr>
                                <tr>
                                	<td><strong>Mix it up</strong></td>
                                    <td>jQuery plugin for applying filters on elemnts, such portfolio projects.</td>
                                </tr>
                                <tr>
                                	<td><strong>Page scroller</strong></td>
                                    <td>Easy and important scroll-to-top functionality</td>
                                </tr>
                                <tr>
                                	<td><strong>SequenceJS Slider</strong></td>
                                    <td>Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles. <a href="http://www.sequencejs.com/" target="_blank">http://www.sequencejs.com/</a>"</td>
                                </tr>
                            </tbody>
                        </table>
                        
                        <p>
                        NOTE: If you want to find out more about the included components, please click <a href="preview.webpixels.ro/boomerang/components.html" target="_blank">here</a>
                        </p>
                    </div>
                </div>
                
                <!-- CHAPTER 3: QUICK SETUP -->
                <div class="row" id="setup">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Quick setup</h2>
                        <p>
                        Once downloaded, unzip the compressed folder to see the structure of (the compiled) Boomerang. You'll see something like this:
                        </p>
<pre>
    <code class="bash">
    boomerang/
    ├── assets/
    │   ├── bootstrap/
    │   ├── ...
    ├── css/
    │   ├── global-style.css
    │   ├── global-style.less
    │   ├── themes.less
    │   └── buttons.less
    │   └── shortcodes.less
    ├── font-awesome/
    ├── images/
    ├── js/
    │   ├── jquery.wp.custom.js
    │   └── ...
    └── index.html
    └── about.html
    └── ...
    </code>
</pre>
						<h4>Folder/File description</h4>
						<p>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th>Folder/File name</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>assets</td>
                                    <td>This folder contains all Bootstrap files and all installed plugins.</td>
                                </tr>
                                <tr>
                                	<td>css</td>
                                    <td>This folder contains all css and less files needed to create the template stylesheet.</td>
                                </tr>
                                <tr>
                                	<td>font-awesome</td>
                                    <td>This folder contains all files necessary for the vectorial icons used in the template.</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                	<td>js</td>
                                    <td>This folder contains all javascripts.</td>
                                </tr>
                                <tr>
                                	<td>global-styles.css</td>
                                    <td>Represents the compiled version of the less files. To edit the stylesheet use less files to create new classes and when finiseh use a LESS compiler (ex: Crunch) to compile your work.</td>
                                </tr>
                                <tr>
                                	<td>jquery.wp.custom.js</td>
                                    <td>Represents the main js file where all client event initializations happen. This is the file where you can creat client events, functions etc.</td>
                                </tr>
                            </tbody>
                        </table>
                        </p>
                    </div>
                </div>
        		<!-- CHAPTER 3: STYLING AND COLORING -->
                <div class="row" id="styling">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Styling and Coloring</h2>
                        <p>
                        Boomerang comes with 6 colors by default. Each color represents a theme that can be set as default. On your request we can add more colors if needed or you can create your own if you have some CSS/LESS skills.
                        </p>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th>Theme</th>
                                    <th>CSS class</th>
                                    <th>Details</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>Red</td>
                                    <td>wp-theme-1</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                	<td>Violet</td>
                                    <td>wp-theme-2</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                	<td>Blue</td>
                                    <td>wp-theme-3</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                	<td>Green</td>
                                    <td>wp-theme-4</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                	<td>Yellow</td>
                                    <td>wp-theme-5</td>
                                    <td>-</td>
                                </tr>
                                <tr>
                                	<td>Orange</td>
                                    <td>wp-theme-6</td>
                                    <td>-</td>
                                </tr>
                            </tbody>
                        </table>
                        <p>
                        There are two ways of setting the main theme: on each page or with jQuery.
                        </p>
                        <br>
                        <h4>Manual: On each page</h4>
                        <p>Add the theme class name (ex: wp-theme-1) on the body tag on every page of the site as bellow:</p>
                        <code>&lt;body class="wp-theme-1"&gt; … &lt;/body&gt;</code>
                        <br><br>
                        <h4>Client event: with jQuery</h4>
                        <p>Second method is to open the jquery.wp.custom.js from js folder, find the Active theme section and replace the theme class with the one you want to set. It will automatically add the desired class on the body tag on each page this script is included. If you don't want this method remove the entire line of code.</p>
                        <code>$("body").addClass("wp-theme-1");</code>
                    </div>
                </div>
                
                <!-- CHAPTER 4: LAYOUT OPTIONS -->
                <div class="row" id="layout">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Layout options</h2>
                        <h4>Boxed or Fluid</h4>
                        <p>
                        	Boomerang has 2 layout versions: Boxed or fluid. The fluid version is set by default. If you want to set the boxed version find the div wich has the <strong>wrapper</strong> class and apply next to it the class <strong>boxed</strong>, as below:
                        </p>
                        <code>&lt;div class="wrapper boxed"&gt; … &lt;/div&gt;</code>
                        <br><br>
                        <p>
                        You can now set new backgrounds to your website. For that, check the <strong>Creating and changing backgrounds </strong> section.
                        </p>
                    </div>
                </div>
                
                <!-- CHAPTER 5: HEADER -->
                <div class="row" id="header">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Header</h2>
                        <p>
                        Boomerang comes with many types of header. In the near future we will create even more types to satisfy any need of your website. The header is formed of: <strong>top header</strong> and <strong>header</strong> (logo + navigation).
                        <br><br>
                        The top header is optional. You can show it or hide it, customize it as you need. We have integrated some functionalities such language select and cart preview. 
                        <br><br>
                        The header is formed by the logo and the navigation. To change the logo just open the file, find the logo area and change the image path.
                        <br>
                        The navigation comes in two versions: <strong>left aligned</strong> and <strong>right aligned</strong>. The examples can be found in the header-example files from the package. Choose the one is best for your website and start from there. We have implemented an extra feature that allow you to insert a third level navigation.
                        </p>
                        
                        <br>
                        
                        <h4>Navbar stickyness</h4>
                        <p>
                        Many customers asked for this feature. Now you can set the navbar as sticky from jQuery. It allows the header to be visible all the time when scrolling. To activate this feature we created a jquery function in jquery.wp.custom.js and and called it on page load:
                        </p>
                        <code>function enableStickyNav(){
                                $(".navbar").sticky({ 
                                    topSpacing: 0,
                                    className: "navbar-fixed"
                                });	
                            }
                            </code>
                        <br><br>
                        <p>
                        If you want this feature deactivated, just remove the line of code that calls this function. you can find it at the top of the same files.
                        </p>
                        <br>
                        <h4>Navbar contrasted</h4>
                        <p>
                        A new helpful class is now available for styling the navbar. The navbar dropdowns have now 2 versions: <strong>white</strong> and <strong>dark</strong>. The white one comes by default. To activate the dark one you have to apply the navbar-contrasted class on the navbar container as below:                        
                        </p>
                        <code>&lt;div id="navOne" class="navbar navbar-wp navbar-contrasted" role="navigation"&gt; ... &lt;/div&gt;</code>
                    </div>
                </div>
                <!-- CHAPTER 5: SLIDE BAR -->
                <div class="row" id="slide-bar">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Slide bar</h2>
                        <p>
                        The slide bar is a very cool features of Boomerang. You may be familiarized with this feature from mobile apps. It is a very 			nice and clean way to display important content and actions only when needed. It's a must have for small device resolutions.
						<br><br>
						This features can be activated/deactivated very easily. All animations are made with CSS3 and client events with jQuery. Boomerang comes with slide bar activated as default.
                        </p>
                    </div>
                </div>
                <!-- CHAPTER 5: SEARCH -->
                <div class="row" id="search">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Search</h2>
                        <p>
                        We have implemented two types of search options. Choose the one that fits best with your website needs: <strong>navbar search</strong> or <strong>slide bar search</strong>.
                        </p>
                    </div>
                </div>
                <!-- CHAPTER 6: SLIDERS -->
                <div class="row" id="sliders">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Sliders</h2>
                        <p>
                        We have implemented 4 types of slider: Layer Slider, Fraction Slider, SequenceJS Slider, Bootstrap. We already work on implementing even more slider plugins.
                        </p>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th style="width:20%;">Plugin name</th>
                                    <th style="width:10%;">Type</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>Layer Slider</td>
                                    <td>Premium - $10</td>
                                    <td>The price of this plugin is not included in the template price($10). To learn more about customization and creating your own slider click here: <a href="http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/" target="_blank">http://kreaturamedia.com/layerslider-responsive-jquery-slider-plugin/</a></td>
                                </tr>
                                <tr>
                                	<td>Fraction Slider</td>
                                    <td>Free</td>
                                    <td>
                                    FractionSlider is a jQuery plugin for image/text-sliders. It allows you to animate multiple elements per slide. You can set different animation methods like fade or transitions from a certain direction. Also there are options to specify delays and easing for each element. You have full layout and design control through html and css (every html-element can be animated): <a href="http://jacksbox.de/stuff/jquery-fractionslider/" target="_blank">http://jacksbox.de/stuff/jquery-fractionslider/</a>
									</td>
                                </tr>
                                <tr>
                                	<td>SequenceJS Slider</td>
                                    <td>Free or Premium</td>
                                    <td>Sequence.js is a refreshing and modern take on website sliders. Using just HTML and CSS, Sequence allows you to create your own responsive slider with unique transitional styles: <a href="http://www.sequencejs.com/" target="_blank">http://www.sequencejs.com/</a></td>
                                </tr>
                                <tr>
                                	<td>Bootstrap Carousel</td>
                                    <td>Free</td>
                                    <td>Bootstrap component that allows you to create simple slideshows for images, html content and much more: <a href="http://getbootstrap.com/javascript/#carousel" target="_blank">http://getbootstrap.com/javascript/#carousel</a></td>
                                </tr>
                                <tr class="warning">
                                	<td>Revolution Slider</td>
                                    <td>Premium</td>
                                    <td>Coming soon</a></td>
                                </tr>
                            </tbody>
                        </table>
                    </div>
                </div>
                <!-- CHAPTER: SECTIONS AND BOXES -->
                <div class="row" id="sections">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Sections and boxes</h2>
                        <p>
                        Next, we will describe Boomerang content structures. We have implemented many features to make it easier to customize.
                        </p>
                        <br>
                        <h4>Sections</h4>
                        <p>
                        Boomerang has modular components for making these easier to re-use anytime when needed. That's why we splitted the content block into sections. Every new section is wrapped in a section which has the class <strong>slice</strong>.
                        </p>
                        <code>&lt;section class="slice"&gt; ... &lt;/section&gt;</code>
                        <br><br>
                        <p>
                        The standard structure for creating content block is the next one:
                        </p>
<pre>
    <code>
    &lt;section class="slice"&gt;
        &lt;div class="w-section inverse"&gt;
            &lt;div class="container"&gt;
                &lt;div class="row"&gt;
                    &lt;div class="col-md-6"&gt; 
                    	... 
                    &lt;/div&gt;
                    &lt;div class="col-md-6"&gt; 
                    	... 
                    &lt;/div&gt;
                &lt;/div&gt;
            &lt;/div&gt;
        &lt;/div&gt;
    &lt;/section&gt;
    </code>
</pre>
						<br><br>
                        <p>
                        For setting a section background we created some css classes that can be directly applied on the section tag class. You can create even more background colors in the themes.less file. The default section background classes are:
                        </p>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th style="width:20%;">Background</th>
                                    <th style="width:10%;">CSS class</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>Base</td>
                                    <td>.bg-2</td>
                                    <td>It applies the base color of the selected theme (red, blue, green etc). The base color can be changed by changing the value of the @baseBg variable.</td>
                                </tr>
                                <tr>
                                	<td>White</td>
                                    <td>.bg-3</td>
                                    <td>
                                    It applies a white color on the section. The white color can be changed by changing the value of @lightBg variable.
									</td>
                                </tr>
                                <tr>
                                	<td>Dark</td>
                                    <td>.bg-4</td>
                                    <td>
                                    It applies a dark color on the section. The dark color can be changed by changing the value of @darkBg variable.
									</td>
                                </tr>
                                <tr>
                                	<td>Striped</td>
                                    <td>.bg-5</td>
                                    <td>
                                    It applies a gray tone color on the section which is best if you want to create a striped layout by alternatig white and gray sections. It automatically sets a top and bottom border for better delimitation. The striped color can be changed by changing the value of @contrastBg variable.
									</td>
                                </tr>
                            </tbody>
                        </table> 
                        <br>
                        <h4>Boxes</h4>
                        <p>
                        We have implemented a lot of features for this element. The main class for boxes is <strong>w-box</strong>. You can have transparent, white, dark and bordered boxes. Here it is how you use them
                        </p>  
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th style="width:20%;">Box</th>
                                    <th style="width:10%;">CSS class</th>
                                    <th>Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>Transparent box</td>
                                    <td>.w-box.w-box-inverse</td>
                                    <td>It is the main wrapper for boxed contents. It has no background or borders. It is used in grid cols so you can apply different styles on it.</td>
                                </tr>
                                <tr>
                                	<td>White box</td>
                                    <td>.w-box.white</td>
                                    <td>
                                    -
									</td>
                                </tr>
                                <tr>
                                	<td>Dark box</td>
                                    <td>.w-box.dark</td>
                                    <td>
                                    -
									</td>
                                </tr>
                            </tbody>
                        </table>   
                        NOTE: We have many examples of how you can use this boxes in you website. Take a look on our pre-built pages and try them.
                        </div>
                    </div>
                  	<!-- CHAPTER: SECTIONS AND BOXES -->
                	<div class="row" id="forms">
                		<div class="col-md-12">
                    	<h2 class="sub-header">Forms</h2>
                        <p>
                        There are two types of forms: <strong>light</strong> and <strong>dark</strong>
                        </p>  
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th style="width:20%;">Form</th>
                                    <th style="width:10%;">CSS class</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>Light</td>
                                    <td>.form-light</td>
                                </tr>
                                <tr>
                                	<td>Dark</td>
                                    <td>.form-dark</td>
                                </tr>
                            </tbody>
                        </table>   
                        <p>
                        To use one of this classes, just add the desired class on the form tag as below:
                        </p>
                        <code>&lt;form class="form-light"&gt; ... &lt;/form&gt;</code>
                    </div>
                </div>
                <!-- CHAPTER: HOVER ANIMATIONS -->
                <div class="row" id="sections">
                	<div class="col-md-12">
                    	<h2 class="sub-header">Hover animations</h2>
                        <p>
                        It is very easy to set up hover animation over elements. For now, the template has 3 types of hover animation. To apply any of these add the desired class on the container that wrappes the element that will be animated. After that follow the template examples to have your own animated item.
                        </p>
                        <table class="table table-bordered table-responsive">
                        	<thead>
                            	<tr>
                                    <th style="width:20%;">Name</th>
                                    <th style="width:10%;">CSS class</th>
                                    <th style="width:10%;">Description</th>
                                </tr>
                            </thead>
                            <tbody>
                            	<tr>
                                	<td>Full overlay with buttons</td>
                                    <td>.animate-hover-slide</td>
                                    <td>On hover a semi-opaque background comes over the element. You can apply some action buttons (see here: <a href="http://preview.webpixels.ro/boomerang/work.html" target="_blank">http://preview.webpixels.ro/boomerang/work.html</a>)</td>
                                </tr>
                                <tr>
                                	<td>Image rescale with title and social icons</td>
                                    <td>.animate-hover-slide-2</td>
                                    <td>It rescales the picture and shows the hidden information, such titles, social icons etc (see here: <a href="http://preview.webpixels.ro/boomerang/team.html" target="_blank">http://preview.webpixels.ro/boomerang/team.html</a>)</td>
                                </tr>
                                <tr>
                                	<td>Bottom slide bar with action buttons, social icons)</td>
                                    <td>.animate-hover-slide-3</td>
                                    <td>It slides up a small bar where you can put social icons, titles, buttons etc  (see here: <a href="http://preview.webpixels.ro/boomerang/team.html" target="_blank">http://preview.webpixels.ro/boomerang/team.html</a></td>
                                </tr>
                            </tbody>
                        </table>   
                    </div>
                </div>                    
        	</div>
        </div>
    </div>

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="assets/bootstrap/js/bootstrap.min.js"></script>
  </body>
</html>